﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>MU-css</title>
<meta name="keywords" content="MU-CSS"/>
<meta name="description" content="MU-CSS"/>
<link rel="stylesheet" href="mu.css">
<!--[if IE]><script type="text/javascript" src="js/class/DD_roundies.js"></script><![endif]-->
<!--[if IE 6]><script type="text/javascript" src="js/class/DD_belatedPNG.js"></script><![endif]-->
<!--[if IE]><script type="text/javascript" src="js/iefix.js"></script><![endif]-->
</head>
<body>
1.首字母大写：<br/>
<p class="mu-firstbig">这是一段文字,他的首字母大小,不知道用中文可以不？</p>
<p class="mu-firstbig">This is a paragraph of text, his first letter size, do not know Chinese can not?</p>
<div style="float:left; width:200px;">1</div><div class="clear" style="float:left; width:200px;">2</div><div style="float:left; clear:left; width:200px;">3</div>
<p class="strong">这段文字被加粗了。</p><br/><br/><br/><br/>
<div class="left" style="width:200px; height:80px;">左</div><div class="center" style="width:200px; height:80px;">中</div><div class="right" style="width:200px; height:80px;">右</div>
<p class="show">这段文字会被正常显示</p>
<p class="hide">这段文字会被隐藏起来</p>
<div class="inline">可以在同一行吗？</div><div class="inline">在一起吧。</div>
<div class="transparent" style="position:absolute; left:30px; top:3px;">透明的</div>
<div class="break" style="width:200px; height:400px;">在这里长单词可是会被换行的，来了啊：This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.</div>
<div class="relative" style="width:180px; height50px; left:-30px; top:-30px;">这个是相对定位的哦。</div>
<p class="underline">这些文字下面会有下划线</p>
<p class="dashedline">这些标签下面会有虚线</p>
<ol class="dashedline">
<li>好好看看啊1</li>
<li>好好看看啊2</li>
<li>好好看看啊3</li>
</ol>
<p class="highlight">高亮蓝底白字</p>
<div class="ellipsis" style="width:200px; height:30px;">在这里长句子可是会被省略号替代的，来了啊：This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.</div>
<span class="pink">粉色字体</span>
<span class="blue">蓝色字体</span>
<span class="deepblue">深蓝色字体</span>
<span class="gray">灰色字体</span>
<span class="red">红色字体</span>
<span class="black">黑色字体</span>
<span class="white">白色字体</span>
<span class="green">绿色字体</span>
<div style="width:200px; height:200px;" class="gradient">哈哈哈哈哈这个地方底色渐变哦</div>
<br/>
<div style="width:200px; height:200px; position:relative; left:50px; background-color:#000;" class="radius">哈哈哈哈哈这个地方是圆角的哦哦</div>
<div style="width:93px; height:94px; position:absolute; left:500px; top:500px;">
<div class="pngfix" style="background-image:url(new_products_title.png); width:93px; height:94px;">把png框住避免修复时移位</div>
</div>
<div style="width:93px; height:94px; position:absolute; left:540px; top:560px; z-index:100">哈哈哈</div>
<div class="fixed mu-lefttop" style="width:100px; height:100px;border:#ddd solid 1px; z-index:100; display:block;">固定在左上角</div>
<div class="fixed mu-righttop" style="width:100px; height:100px;border:#ddd solid 1px; z-index:100; display:block;">固定在右上角</div>
<div class="fixed mu-leftbottom" style="width:100px; height:100px; border:#ddd solid 1px; z-index:100; display:block;">固定在左下角</div>
<div class="fixed mu-rightbottom" style="width:100px; height:100px;border:#ddd solid 1px; z-index:100; display:block;">固定在右下角</div>
<div class="fixed mu-fixedplace" style="width:100px; height:100px;border:#ddd solid 1px; z-index:100; display:block;">固定在指定位</div>
<script>
function getInfo(){
var s = "";
s += " 网页可见区域宽：" + document.body.clientWidth;
s += " 网页可见区域高：" + document.body.clientHeight;
s += " 网页可见区域宽：" + document.body.offsetWidth + " (包括边线和滚动条的宽)";
s += " 网页可见区域高：" + document.body.offsetHeight + " (包括边线的宽)";
s += " 网页正文全文宽：" + document.body.scrollWidth;
s += " 网页正文全文高：" + document.body.scrollHeight;
s += " 网页被卷去的高(ff)：" + document.body.scrollTop;
s += " 网页被卷去的高(ie)：" + document.documentElement.scrollTop;
s += " 网页被卷去的左：" + document.body.scrollLeft;
s += " 网页正文部分上：" + window.screenTop;
s += " 网页正文部分左：" + window.screenLeft;
s += " 屏幕分辨率的高：" + window.screen.height;
s += " 屏幕分辨率的宽：" + window.screen.width;
s += " 屏幕可用工作区高度：" + window.screen.availHeight;
s += " 屏幕可用工作区宽度：" + window.screen.availWidth;
s += " 你的屏幕设置是 " + window.screen.colorDepth + " 位彩色";
s += " 你的屏幕设置 " + window.screen.deviceXDPI + " 像素/英寸";
document.write(s);
}
getInfo();
</script>
</body>
</html>